



function banner(el, time) {

    // 1 实现每隔1s换一张图片
    //   思路：
    //      css的实现：把所有的图都定位在同一个位置，隐藏掉，每次显示一张
    //      js的实现：  每隔1s换一张图片   
    //          定时器
    //          换图的实现   显示第一张，显示第二张，显示第三张   1  2  3  --- 计数器

    // 2 上下翻页

    // 3 小点切换

    // 4 鼠标移入  停止播放      鼠标移出 继续播放

    // 5 防止点击过快
    //     至少隔300ms才可以切换下一张   --- 节流



    var oBox = document.querySelector(el);

    var oImgs = oBox.querySelectorAll('ul li');
    // console.log(oImgs);

    var oPrev = oBox.querySelector('.prev');
    var oNext = oBox.querySelector('.next');

    var oDots = oBox.querySelectorAll('ol li');


    // 计数器：记录播放第几张图片
    var index = 0;

    // 定时器
    var t = null;


    var flag = true;   // 是否可以点击


    autoPlay();


    // 上翻页
    oPrev.onclick = function () {
        if (flag) {
            flag = false;
            clearInterval(t);
            index--;
            if (index === -1) {
                index = oImgs.length - 1;
            }
            showOne();
            setTimeout(function () {
                flag = true;
            }, 300)
        }

    }



    // 下翻页
    oNext.onclick = function () {
        clearInterval(t);
        index++;
        if (index === oImgs.length) {
            index = 0;
        }
        showOne();
    }


    // 小点切换
    // 循环绑定事件
    for (var i = 0; i < oDots.length; i++) {
        // 给对象添加自定义属性 --- 存储下标
        oDots[i].index = i;
        oDots[i].onclick = function () {
            clearInterval(t)
            // 改变index的值
            index = this.index;  // 点击的时候，index变成点击对应的那个下标
            showOne()
        }
    }


    // 鼠标移入
    oBox.addEventListener('mouseover', function () {
        clearInterval(t)
    })

    oBox.addEventListener('mouseout', function () {
        autoPlay()
    })




    // 1 自动播放  
    function autoPlay() {
        t = setInterval(function () {
            // 每隔1s播放下一张
            index++;
            // 播放完最后一张  回到第一张
            if (index === oImgs.length) {
                index = 0;
            }

            // 显示一张图片
            showOne();
        }, time)
    }



    // 显示index对应的这张图片和小点
    function showOne() {
        // 清除所有的on
        for (var i = 0; i < oImgs.length; i++) {
            oImgs[i].classList.remove('on');
        }
        // 对应的那一张图片显示
        oImgs[index].classList.add('on');

        // 清除所有的active
        for (var i = 0; i < oDots.length; i++) {
            oDots[i].classList.remove('active');
        }
        // 对应的那一张图片显示
        oDots[index].classList.add('active');
    }


}